<template>
  <div>
    <el-form ref="form" :model="skuInfo" label-width="80px">
      <el-form-item label="SPU名称">
       {{spu.spuName}}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model='skuInfo.skuName' ></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input placeholder="价格(元)" type="number" v-model='skuInfo.price' ></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" type="number" v-model='skuInfo.weight' ></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input placeholder="规格描述" type="textarea" rows='4' v-model="skuInfo.skuDesc" ></el-input>
      </el-form-item>
      <!-- 平台属性 -->
      <el-form-item label="平台属性">
        <el-form :inline='true' label-width="80px">
          <el-form-item :label="attr.attrName" v-for="(attr,index) in attrList" :key='attr.id'>
            <el-select v-model="attr.attrIdAndattrValueId" placeholder="请选择">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key='attrValue.id'></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 销售属性 -->
      <el-form-item label="销售属性">
        <el-form  label-width="80px">
          <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in saleAttrList" :key='saleAttr.id'>
            <el-select v-model="saleAttr.saleAttrIdAndSpuSaleAttrId" placeholder="请选择">
              <el-option :label="spuSaleAttr.saleAttrValueName" :value="`${saleAttr.id}:${spuSaleAttr.id}`" v-for="(spuSaleAttr,index) in saleAttr.spuSaleAttrValueList" :key='spuSaleAttr.id'></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 图片列表 -->
      <el-form-item label="图片列表">
       <el-table border :data="ImagesList" style="width: 100%" @selection-change="handleSelectionChange" >
         <el-table-column type="selection" width="80"> </el-table-column> 
         <el-table-column  label="图片" width="width"> 
           <template slot-scope="{row,$index}">
            <img :src="row.imgUrl" style="width:100px">
           </template>
         </el-table-column>
         <el-table-column prop="imgName" label="名称" width="width"> </el-table-column>
         <el-table-column prop="prop" label="操作" width="width">
          <template slot-scope="{row,$index}">
            <el-button type="primary" size="mini" v-if="row.isDefault==0" @click="changeDefault(row,ImagesList)">设置默认</el-button>
            <el-tag type="success" v-else >默认</el-tag>
          </template>
          </el-table-column>
       </el-table>
      </el-form-item>
      <!-- 保存,取消,按钮 -->
      <el-form-item >
        <el-button size="mini" type="primary" @click="save">保存</el-button>
        <el-button size="mini" type="primary" @click="$emit('cancel',0)" >取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
    name:'SkuFrom',
    data(){
      return {
        // 平台属性
        attrList:[],
        //销售属性
        saleAttrList:[],
        //图片列表
        ImagesList:[],
         //收集SKU数据，将来提交给服务武新增的某一个实例
        skuInfo: {
          //父组件传递过来的数据
          category3Id: 0,
          spuId: 0,
          tmId: 0,
          //第二类v-model
          skuName: "",
          price: 0,
          weight: "",
          skuDesc: "",
          //需要自己书写代码收集的
          skuDefaultImg: "",
          skuAttrValueList: [
            // {
            //   attrId: 0,
            //   valueId: 0,
            // }
          ],
          skuImageList: [
            // {
            //   id: 0,
            //   imgName: "string",
            //   imgUrl: "string",
            //   isDefault: "string",
            //   skuId: 0,
            //   spuImgId: 0
            // }
          ],
          skuSaleAttrValueList: [
            // {
  
            //   saleAttrId: 0,
      
            //   saleAttrValueId: 0,

            // }
          ],

        },
        spu:{},
        //收集用户选中
        // 图片信息---缺少字段（将来整理的）
        imageList:[],
      }
    },
    methods: {
      // 父组件点击添加sku实例按钮,发送请求,获取平台属性,销售属性,图片列表
      async initSkuFormData(category1Id,category2Id,row){
        let promise1=this.$API.spu.reqAttrList(category1Id,category2Id,row.category3Id)
        let promise2=this.$API.spu.reqSalesAttrList(row.id)
        let promise3=this.$API.spu.reqImagesList(row.id)
        let result =await Promise.all([promise1,promise2,promise3])
        if(result[0].code==200){
          this.attrList=result[0].data
        }
        if(result[1].code==200){
          this.saleAttrList=result[1].data
        }
        if(result[2].code==200){
          // 当数据请求到时,为获取的数组里的每个元素添加一个属性控制设置默认按钮的显示和隐藏
          let imgList=result[2].data
          imgList.forEach((item)=>{
            item.isDefault='0'
          })
          this.ImagesList=imgList
        }
        // 将父组件传递过来的row保存起来
        this.spu=row
      },
      //------------------复选框选中--收集选中的图片信息准备----------------------------------------------------
      // 收集图片信息的回调,暂时将图片收集在外部定义的变量imageList中
      handleSelectionChange(imgageList){
        this.imageList=imgageList
      },
      // [设置默认]按钮 排他控制默认图片的来回切换
      changeDefault(row,ImagesList){
        ImagesList.forEach((item)=>{
          item.isDefault='0'
        })
        row.isDefault='1'
        this.skuInfo.skuDefaultImg=row.imgUrl;
      },
      //------------------------点击保存----整理参数----发送请求---------请求发送成功后 通知父组件切换场景------------
      // 点击保存的回调
      async save(){
        let {skuInfo,attrList,spu,saleAttrList,imageList}=this
        // 整理父组件传递过来的参数
        skuInfo.category3Id=spu.category3Id
        skuInfo.spuId=spu.id
        skuInfo.tmId=spu.tmId
        //整理平台属性属性参数
        skuInfo.skuAttrValueList=attrList.reduce((prev,item)=>{
          if(item.attrIdAndattrValueId){
            let [attrId,valueId] = item.attrIdAndattrValueId.split(":")
            prev.push({attrId,valueId})
          }
          return prev
        },[])
        // 整理销售属性数据
        skuInfo.skuSaleAttrValueList=saleAttrList.reduce((prev,item)=>{
          if(item.saleAttrIdAndSpuSaleAttrId){
            let [saleAttrId,saleAttrValueId] = item.saleAttrIdAndSpuSaleAttrId.split(":")
            prev.push({saleAttrId,saleAttrValueId})
          }
            return prev
        },[])
        // 整理图片数据  利用已有数据加工出新数组,数组的方法map,返回新数组
        skuInfo.skuImageList=imageList.map((item)=>{
          return {
              imgName:item.imgName,
              imgUrl:item.imgUrl,
              isDefault:item.isDefault,
              skuId:item.id
          }
        })
        // 整理数据完毕发送请求
        let result =await this.$API.spu.reqSaveSkuInfo(skuInfo)
        if(result.code==200){
          this.$message('添加成功')
          this.$emit('save',0)
        }
      }
    }

}
</script>

<style>

</style>